//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//应用组件
import home from "@/pages/home.vue";
import login from "@/pages/login.vue";
import H_message from "@/pages/H_message.vue"
import H_News from "@/pages/H_News.vue"
import H_M_Detail from "@/pages/H_M_Detail.vue"
//创建一个路由器 并暴露
//创建router实例对象，去管理一组一组的路由规则
export default new VueRouter({
    routes: [
        {
            name:"主页",
            path: "/home",
            component: home,
            children: [//通过children配置子级路由
                {
                    path: "H_message",//此处一定定不要写: /H_message
                    component: H_message,
                    children:[
                        {
                            name:"详细信息",//给路由命名
                            path: "H_M_Detail/:id/:title",//使用占位符声明接收 params 参数
                            component: H_M_Detail,
                            //props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件
                            // props:{
                            //         a:1,b:"ssss"
                            // }
                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有 params 参数，以props的形式传给Detail组件。
                            //props:true
                            //props的第三种写法,值为函数
                            props($route){
                                return{id:$route.query.id,title:$route.query.title}
                            }
                        }
                    ]
                },
                {
                    path: "H_News",
                    component: H_News
                }
            ]
        },
        {
            path: "/login",
            component: login
        },
    ]
})
